<template>
  <div class="app-container">
    <div class="chip_desc">
      <div class="chip_desc_arrow"></div>
      <div>~_~ 我是一块 esp32 芯片，我有48 个引脚，</div>
      <div>~_~ 但是灰色的是保留引脚，不能使用哦</div>
    </div>
    <el-row class="mb8 centered-row" v-for="pos in posList">
        <div class="col_gpio">
          <div class="col_gpio_btn" @click="handleAdd(pos.left)" @mouseenter="mouseEnter" @mouseout="mouseOut" >{{pos.left}}</div>
          <div class="col_gpio_desc col_gpio_left_desc" :style="{color: pos.leftColor}" >
            {{pos.leftDesc}}
            <div class="col_gpio_function_desc"> 引脚功能 ：[{{ pos.leftTip }}] </div>
          </div>
        </div>
        <div class="col_gpio_blank"></div>

        <div class="col_gpio">
          <div class="col_gpio_btn" @click="handleAdd(pos.right)" @mouseenter="mouseEnter" @mouseout="mouseOut" >{{pos.right}}</div>
          <div class="col_gpio_desc col_gpio_right_desc" :style="{color: pos.rightColor}">
            {{pos.rightDesc}}
            <div class="col_gpio_function_desc"> 引脚功能 ：[{{ pos.rightTip }}] </div>
          </div>
        </div>
    </el-row>

    <el-row class="mb8 centered-row">
        <div class="col_usb_underline"></div>
    </el-row>

    <el-row class="mb8 centered-row">
        <div class="col_usb"></div>
    </el-row>

    <!-- 添加或修改设备引脚业务对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="芯片id" prop="chipId" v-show="false">
          <el-input
              v-model="form.chipId"
              placeholder="芯片id"
              clearable
              size="small"
          />
        </el-form-item>
        <el-form-item label="引脚序号" prop="gpio">
          <el-input
              readonly
              v-model="form.gpio"
              placeholder="引脚序号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备描述" prop="deviceDesc">
          <el-input
              v-model="form.deviceDesc"
              placeholder="例如：主卧灯"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="继电器描述" prop="relayDesc">
          <el-input
              v-model="form.relayDesc"
              placeholder="例如：主卧灯继电器"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.chip_desc {
  display: block;
  position: fixed;
  top: 100px;
  left: 280px;
  border-radius: 5px;
  background-color: #cbedff;
  width: 200px;
  height: 240px;
  padding: 10px;
  z-index: 2;
}
.chip_desc .chip_desc_arrow {
  display: block;
  position: relative;
  top: 110px;
  left: 180px;
  background-color: #cbedff;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
}
.centered-row {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 12px;
}

.row_gpio {
  background-color: #1d1b1b;
}

.col_gpio {
  width: 16px;
}
.col_gpio .col_gpio_btn {
  border: #1d1b1b solid 1px;
  border-radius: 2px;
  width: 16px;
  height: 16px;
  text-align: center;
  cursor: default;
}

.col_gpio .col_gpio_desc {
  border-bottom: #e7eaec solid 1px;
  border-radius: 2px;
  position: relative;
  width: 100px;
  color: black;
}

.col_gpio .col_gpio_left_desc {
  right: 110px;
  bottom: 15px;
  text-align: right;
}

.col_gpio .col_gpio_right_desc {
  left: 30px;
  bottom: 15px;
  text-align: left;
}

.col_gpio .col_gpio_function_desc {
  padding: 2px;
  left: 30px;
  bottom: 15px;
  text-align: left;
  color: #df8858;
}

.col_gpio_blank {
  border: none;
  width: 200px;
}

.col_usb_underline {
  border-top: #1d1b1b solid 1px;
  text-align: center;
  width: 200px;
}
.col_usb {
  border-left: #1d1b1b solid 1px;
  border-right: #1d1b1b solid 1px;
  border-bottom: #1d1b1b solid 1px;
  width: 50px;
  height: 25px;
}
</style>

<script>
import { listGpiobiz, getGpiobiz, delGpiobiz, addGpiobiz, updateGpiobiz, exportGpiobiz } from "@/api/business/gpiobiz";

import {treeselect} from "@/api/selfcom/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {MonthPicker} from '@/views/components/wowmonthpicker/src/index'
import Template from "@/views/system/template/index.vue";

export default {
  name: "Gpiobiz",
  components: {Template, Treeselect, MonthPicker },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 本页面的芯片 id
      chipId: undefined,
      // 选中数组
      ids: [],
      posList : [
        {left : 1, leftTip:" ", leftDesc:"VIN(3.3 V)",leftColor: '#88A6BA',
          right: 25, rightTip:" ", rightDesc: "GND", rightColor: '#88A6BA'},

        {left : 2, leftTip:"触摸", leftDesc:"RESET", leftColor: '#88A6BA',
          right: 26, rightTip:" ", rightDesc: "待设置"},

        {left : 3, leftTip:" ", leftDesc:"待设置",
          right: 27, rightTip:"触摸", rightDesc: "待设置"},

        {left : 4, leftTip:"触摸", leftDesc:"待设置",
          right: 28, rightTip:" ", rightDesc: "TX", rightColor: '#88A6BA'},

        {left : 5, leftTip:" ", leftDesc:"待设置",
          right: 29, rightTip:" ", rightDesc: "RX", rightColor: '#88A6BA'},

        {left : 6, leftTip:" ", leftDesc:"待设置",
          right: 30, rightTip:" ", rightDesc: "待设置"},

        {left : 7, leftTip:" ", leftDesc:"待设置",
          right: 31, rightTip:" ", rightDesc: "GND", rightColor: '#88A6BA'},

        {left : 8, leftTip:" ", leftDesc:"待设置",
          right: 32, rightTip:"触摸", rightDesc: "待设置"},

        {left : 9, leftTip:" ", leftDesc:"待设置",
          right: 33, rightTip:"触摸", rightDesc: "待设置"},

        {left : 10, leftTip:" ", leftDesc:"待设置",
          right: 34, rightTip:" ", rightDesc: "待设置"},

        {left : 11, leftTip:" ", leftDesc:"待设置",
          right: 35, rightTip:" ", rightDesc: "待设置"},

        {left : 12, leftTip:"触摸", leftDesc:"待设置",
          right: 36, rightTip:" ", rightDesc: "待设置"},

        {left : 13, leftTip:"触摸", leftDesc:"待设置",
          right: 37, rightTip:" ", rightDesc: "待设置"},

        {left : 14, leftTip:"触摸", leftDesc:"待设置",
          right: 38, rightTip:" ", rightDesc: "待设置"},

        {left : 15, leftTip:"触摸", leftDesc:"待设置",
          right: 39, rightTip:" ", rightDesc: "待设置"},

        {left : 16, leftTip:" ", leftDesc:"待设置",
          right: 40, rightTip:" ", rightDesc: "待设置"},

        {left : 17, leftTip:" ", leftDesc:"待设置",
          right: 41, rightTip:" ", rightDesc: "待设置"},

        {left : 18, leftTip:" ", leftDesc:"待设置",
          right: 42, rightTip:" ", rightDesc: "待设置"},

        {left : 19, leftTip:" ", leftDesc:"GND", leftColor: '#88A6BA',
          right: 43, rightTip:" ", rightDesc: "待设置"},

        {left : 20, leftTip:" ", leftDesc:"待设置",
          right: 44, rightTip:" ", rightDesc: "待设置"},

        {left : 21, leftTip:" ", leftDesc:"FLASH D2", leftColor: '#88A6BA',
          right: 45, rightTip:" ", rightDesc: "待设置"},

        {left : 22, leftTip:" ", leftDesc:"FLASH D3", leftColor: '#88A6BA',
          right: 46, rightTip:" ", rightDesc: "FLASH", rightColor: '#88A6BA'},

        {left : 23, leftTip:" ", leftDesc:"FLASH CMD", leftColor: '#88A6BA',
          right: 47, rightTip:" ", rightDesc: "FLASH", rightColor: '#88A6BA'},

        {left : 24, leftTip:" ", leftDesc:"VIN(5 V)", leftColor: '#88A6BA',
          right: 48, rightTip:" ", rightDesc: "FLASH", rightColor: '#88A6BA'}
      ],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 设备引脚业务表格数据
      gpiobizList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        chipId: undefined,
        gpio: undefined,
        onOff: undefined,
        status: undefined,
        deviceDesc: undefined,
        relayDesc: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        gpio: [
            { required: true, message: "引脚序号不能为空", trigger: "blur" }
        ],
        deviceDesc: [
            { required: true, message: "设备描述不能为空", trigger: "blur" }
        ],
        relayDesc: [
            { required: true, message: "继电器描述不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.chipId = this.$route.query.chipId;
    if(!!! this.chipId) {
      this.$alert("未选择芯片");
      return;
    }

    this.getList();
    this.getTreeselect();
  },
  methods: {
    /** 查询设备引脚业务列表 */
    getList() {
      this.loading = true;
      // console.log("chipId ...", chipId);
      this.queryParams.chipId = this.chipId;
      listGpiobiz(this.queryParams).then(response => {
        this.gpiobizList = response.rows;
        this.total = response.total;
        this.loading = false;

        // 初始化到 pos 上
        this.initPosList();
      });
    },

    initPosList() {
      this.posList.forEach(pos => {

        let leftIndex = pos.left;
        let rightIndex = pos.right;
        // 已配置的引脚，将其描述展示出来
        let ifLeftConfig = this.getGpioConfig(leftIndex);
        if(!! ifLeftConfig) {
          pos.leftDesc = ifLeftConfig.deviceDesc;
          pos.leftColor = "#00afff"
        }

        let ifRightConfig = this.getGpioConfig(rightIndex);
        if(!! ifRightConfig) {
          pos.rightDesc = ifRightConfig.deviceDesc;
          pos.rightColor = "#00afff"
        }
      });
      // console.log("posList ", JSON.stringify(this.posList))
    },


    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        chipId: undefined,
        gpio: undefined,
        onOff: undefined,
        status: "0",
        deviceDesc: undefined,
        relayDesc: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd(gpioIndex) {
      if(gpioIndex == 1 // VIN 3.3V
        || gpioIndex == 2 // RESET
        || gpioIndex == 19 // GND
        || gpioIndex == 21 // FLASH D2
        || gpioIndex == 22 // FLASH D3
        || gpioIndex == 23 // FLASH CMD
        || gpioIndex == 24 // VIN 5 V
        || gpioIndex == 25 // GND
        || gpioIndex == 28 // TX
        || gpioIndex == 29 // RX
        || gpioIndex == 31 // GND
        || gpioIndex == 46 // FLASH
        || gpioIndex == 47 // FLASH
        || gpioIndex == 48 // FLASH
      ){
        // 特殊引脚，不能被配置业务操作
        return;
      }
      this.reset();
      this.open = true;
      this.title = "添加设备引脚业务";
      this.form.chipId = this.chipId;
      this.form.gpio = gpioIndex;

      let gpioConfig = this.getGpioConfig(gpioIndex);
      // console.log("gpioConfig ", JSON.stringify(gpioConfig))
      if(!! gpioConfig) {
        this.form.id = gpioConfig.id;
        this.form.deviceDesc = gpioConfig.deviceDesc;
        this.form.relayDesc = gpioConfig.relayDesc;
      }
      this.getList();

    },

    getGpioConfig(gpioIndex) {
      // console.log("getGpioConfig ", JSON.stringify(this.gpiobizList))
      let gpioConfig = this.gpiobizList.filter(chip => {
        return gpioIndex == chip.gpio;
      });
      if(!! gpioConfig && gpioConfig.length > 0) {
        return gpioConfig[0];
      }
      return undefined;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getGpiobiz(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改设备引脚业务";
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateGpiobiz(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.updateView(this.form.gpio, this.form.deviceDesc);

              }
            });
          } else {
            addGpiobiz(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.updateView(this.form.gpio, this.form.deviceDesc);
              }
            });
          }
        }
      });
    },

    updateView(gpio, deviceDesc) {
      this.posList.forEach(pos => {
        // console.log("pos", JSON.stringify(pos), "gpio ", gpio)
        if(gpio == pos.left) {
          pos.leftDesc = deviceDesc;
          console.log("pos.leftDesc", JSON.stringify(pos))
        } else if(gpio == pos.right) {
          pos.rightDesc = deviceDesc;
          console.log("pos.rightDesc", JSON.stringify(pos))
        }
      })

      // console.log("updateView gpio this.posList,  ", JSON.stringify(this.posList))
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除设备引脚业务编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delGpiobiz(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    mouseEnter(event) {
      const div = event.target;
      // 更改颜色
      div.style.backgroundColor = '#c4eaff';
      div.style.border = 'none';
    },
    mouseOut(event) {
      const div = event.target;
      // 更改颜色
      div.style.backgroundColor = '#fff';
      div.style.border = '#1d1b1b solid 1px';
    },
    openDialog(index) {
      console.log("clicked ... ", index)
    },

  }
};
</script>
